<template>
    <div>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="item">
                    <div class="title">订单号:</div>
                    <div class="content">{{orderInfo.orderNo}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">学生姓名:</div>
                    <div class="content">{{orderInfo.studentName}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">学生学号:</div>
                    <div class="content">{{orderInfo.studentNo}}</div>
                </div>
            </el-col>
           
            
            
        </el-row>
        <el-row :gutter="20">
            
            <el-col :span="8">
                <div class="item">
                    <div class="title">订单金额:</div>
                    <div class="content">{{orderInfo.totalFee}}</div>
                </div>
            </el-col>
            <el-col :span="10">
                <div class="item">
                    <div class="title">支付类型:</div>
                    <div class="content" v-if="orderInfo.eduOrderRecordEntityList && orderInfo.eduOrderRecordEntityList[0]">{{payType[orderInfo.eduOrderRecordEntityList[0].payType]}} {{orderInfo.eduOrderRecordEntityList[0].fee}}元</div>
                    <div class="content" v-if="orderInfo.eduOrderRecordEntityList && orderInfo.eduOrderRecordEntityList[1]">{{payType[orderInfo.eduOrderRecordEntityList[1].payType]}} {{orderInfo.eduOrderRecordEntityList[1].fee}}元</div>
                    <div class="content" v-if="orderInfo.eduOrderRecordEntityList && orderInfo.eduOrderRecordEntityList[2]">{{payType[orderInfo.eduOrderRecordEntityList[2].payType]}} {{orderInfo.eduOrderRecordEntityList[2].fee}}元</div>
                </div>
            </el-col>
            
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="item">
                    <div class="title">订单来源:</div>
                    <div class="content">{{sourceType[orderInfo.sourceType]}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">订单状态:</div>
                    <div class="content">{{status[orderInfo.status]}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">创建人:</div>
                    <div class="content">{{orderInfo.createUserName}}</div>
                </div>
            </el-col>
            
        </el-row>
        <el-row :gutter="20">
            <el-col :span="8">
                <div class="item">
                    <div class="title">创建时间:</div>
                    <div class="content">{{orderInfo.gmtCreate}}</div>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="item">
                    <div class="title">校区:</div>
                    <div class="content">{{orderInfo.schoolName}}</div>
                </div>
            </el-col>
             <el-col :span="8">
                <div class="item">
                    <div class="title">购买账号:</div>
                    <div class="content">{{orderInfo.mobile}}</div>
                </div>
            </el-col>
            
            
        </el-row>
        <el-row :gutter="20">
             <el-col :span="18">
                <div class="item">
                    <div class="title">校区地址:</div>
                    <div class="content">{{orderInfo.address}}</div>
                </div>
            </el-col>
        </el-row>
        <el-table
        :data="orderInfo.eduClassListVOList"
        border
        style="width: 100%;">
        <el-table-column
            type="index"
            header-align="center"
            align="center"
            label="班级列表"
            width="100">
        </el-table-column>
        <el-table-column
            prop="name"
            header-align="center"
            align="center"
            label="班级名称">
        </el-table-column>
        <el-table-column
            prop="subjectName"
            header-align="center"
            align="center"
            label="学科">
        </el-table-column>
        <el-table-column
            prop="price"
            header-align="center"
            align="center"
            label="价格(元)">
        </el-table-column>

        </el-table>
    </div>
</template>
<script>
export default {
    data () {
        return {
            orderInfo: '',
            payType:{
                '1': '微信',
                '2': '支付宝',
                '3': '现金'
            },
            status: {
                '0': '未支付',
                '1': '已支付',
                '2': '已退款',
                '3': '过期',
            },
            sourceType:{
                '0': '手机端',
                '1': 'pc端'
            }
        }
    },
    methods:{
        getOrderInfo(orderNo) {
            this.$http({
              url: this.$http.adornUrl(`/sys/eduorder/info/${orderNo}`),
              method: 'get',
              params: this.$http.adornParams()
            }).then(({data}) => {
              if (data && data.code === 0) {
                this.orderInfo = data.eduOrder;
         
              }
            })
        },
        
       
    },
    created: function () {

        let orderNo = this.$route.query.orderNo;
        this.getOrderInfo(orderNo);
    }
}
</script>
<style scoped>
.item{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin:  20px;
}
.item .title {
    width: 100px;
    color: #777;
}
.item .content {
    flex: 1;
    color: #454545;
}
.select-title{
    font-size: 14px;
    font-weight: 700;
    color: #454545;
    margin: 10px 0;
}
</style>